<template>
  <div id="mPhone">
    <div class="mPhone_tips">
      <p>未注册的用户默认直接注册</p>
      <p>登录即代表您已同意<a href="#">《诺心lecake用户服务协议》</a></p>
    </div>
    <form method="get">
      <div class="input_wrap">
        <input
          type="text"
          maxlength="11"
          placeholder="请输入手机号"
          v-model="userInfo.iPhone" tabindex="-1"
        />
      </div>
      <div class="input_wrap">
        <input
          type="text"
          maxlength="6"
          placeholder="请输入短信验证码"
          v-model="userInfo.verification" tabindex="-1"
        />
        <button class="code_btn" @click="Verification" tabindex="-1">发送验证码</button>
      </div>
      <button class="login_btn" @click="login" tabindex="-1">验证并登录</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "mPhone",
  data() {
    return {
      verifications: null,
      userInfo: {
        iPhone: null,
        verification: null,
      },
    };
  },
  methods: {
    Verification() {
      this.verifications = " ";
      for (var i = 0; i < 6; i++) {
        //6位
        this.verifications += parseInt(Math.random() * 10);
      }
      this.$notify({
        duration: 2000,
        color: "#fff",
        background: "#FE4320",
        message:
          "您的验证码为: " +
          this.verifications +
          "，" +
          "请保管好您的验证码,请勿泄露",
      });
    },
    login() {
      // 手机号表单验证
      var iPhoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      var iPhone = this.userInfo.iPhone;
      var verification = this.userInfo.verification;
      if (iPhone != "" || verification != "") {
        if (iPhoneReg.test(iPhone) || verification == this.verifications) {
          iPhone = " ";
          verification = " ";
          this.verifications = " ";
          this.$toast.success("登陆成功");
          let token = "admin";
          localStorage.setItem("token", token);
          localStorage.setItem("iPhone", JSON.stringify(this.userInfo.iPhone));
          this.$router.replace("/my");
        } else {
          iPhone = " ";
          verification = " ";
          this.verifications = " ";
          this.$toast.fail("手机号或验证码不能错误！");
        }
      } else {
        iPhone = " ";
        verification = " ";
        this.verifications = " ";
        this.$toast.fail("手机号或验证码不能为空！");
      }
    },
  },
};
</script>

<style scoped="scoped">
#mPhone {
  margin: 0;
  padding: 0;
}
.mPhone_tips {
  color: #9c9c9c;
  font-size: 0.22rem;
  margin-bottom: 0.4rem;
}
.mPhone_tips > p {
  margin: 0;
}
.mPhone_tips a {
  color: #fe4320;
}
.input_wrap {
  position: relative;
  border-bottom: 1px solid #e1dbcc;
  margin: 0;
  margin-bottom: 0.4rem;
  height: 0.82rem;
  overflow: hidden;
  padding: 0 0.64rem;
}
.input_wrap > input {
  width: 100%;
  height: 100%;
  font-size: 0.24rem;
  display: inline-block;
  border: none;
  outline: none;
  position: absolute;
  top: 0;
}
.input_wrap::before {
  content: "";
  position: absolute;
  width: 0.3rem;
  height: 0.5rem;
  background: url("../assets/icons2.png") no-repeat center;
  background-size: 4rem 4rem;
  top: 30%;
  margin-top: -0.1rem;
  background-position: -65px -35px;
  left: 0.24rem;
}
.input_wrap:nth-of-type(2):before {
  content: "";
  position: absolute;
  width: 0.3rem;
  height: 0.5rem;
  background: url("../assets/icons2.png") no-repeat center;
  background-size: 4rem 4rem;
  top: 30%;
  margin-top: -0.1rem;
  background-position: -25px -37px;
  left: 0.24rem;
}
.code_btn {
  position: absolute;
  width: 0.92rem;
  height: 0.4rem;
  background: transparent;
  color: #3e3e3e;
  right: 0;
  bottom: 0;
  font-size: 0.24rem;
  width: 1.84rem;
  height: 0.8rem;
  border: none;
}
.code_btn::before {
  content: "";
  position: absolute;
  width: 0.02rem;
  height: 0.32rem;
  background: #fe4320;
  z-index: 1;
  left: 0;
}
.login_btn {
  display: block;
  width: 100%;
  height: 0.8rem;
  background: #fe4320;
  font-size: 0.26rem;
  margin-top: 1.2rem;
  border: none;
  color: #fff;
}
</style>